import React from 'react';
import { connect } from 'dva';
import styles from './BillList.css';
import { Card, Input, Table, Radio, Button } from 'antd';
const { Search } = Input;

function BillList({ bill: { list: { queryKey, columns, items, pageSize, page, totalCount } }, loading, dispatch, params }) {
  function pageChangeHandler(page, pageSize) {
    dispatch({ type: 'businessMgr/queryByPage', payload: { page: page, pageSize: pageSize } });
  }
  function query(queryStr) {
    dispatch({ type: 'businessMgr/queryBySearch', payload: queryStr });
  }
  function handleStateChange(e) {
    dispatch({ type: 'businessMgr/queryByKey', payload: e.target.value });
  }
  function deleteHandler() {
    dispatch({ type: 'businessMgr/remove' });
  }
  function showSizeChangeHandler(cur, size) {
    pageChangeHandler(1, size);
  }
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      debugger;
      selectedRows[0].checked = false;
      dispatch({ type: 'businessMgr/changeSelectedItemIds', payload: selectedRowKeys })
    },
    getCheckboxProps: record => ({
      // disabled: record.name === 'Disabled User',    // Column configuration not to be checked
    }),
  };
  const pagination = {
    current: page,
    pageSize: pageSize,
    onChange: pageChangeHandler,
    total: totalCount,
    showTotal: (t) => `总计：${t}`,
    showSizeChanger: true,
    onShowSizeChange: showSizeChangeHandler
  };

  return (
    <div className={styles.normal}>
      <Card>
        <div>
          <Search
            placeholder="请输入查询条件"
            size="large"
            style={{ width: 300, marginRight: 10 }}
            onSearch={value => query(value)} />
          <Radio.Group value={queryKey} onChange={handleStateChange}>
            <Radio.Button value='未完成'>未完成</Radio.Button>
            <Radio.Button value='已完成'>已完成</Radio.Button>
          </Radio.Group>
          <Button type='danger' size='large' className={styles.operBtn} onClick={deleteHandler}>删除</Button>
        </div> </Card>
      <Table rowSelection={rowSelection}
        pagination={pagination}
        columns={columns}
        loading={loading}
        dataSource={items}
        rowKey="id"
        bordered />
    </div>
  );
}

function mapStateToProps(state) {
  return {
    bill: state.businessMgr,
    loading: state.loading.models.businessMgr
  };
}

export default connect(mapStateToProps)(BillList);
